import { Popover } from "flowbite-react";
import { useState } from "react";
import { FaCheck, FaXmark } from "react-icons/fa6";

const Todo = ({ todo, deleteTodo, finishTodo }) => {

    const [open, setOpen] = useState(false);

    const content = (
        <div className="w-64 text-sm text-center text-gray-500 dark:text-gray-400">
            <div className="border-b border-gray-200 bg-gray-100 px-3 py-2 dark:border-gray-600 dark:bg-gray-700">
                <h3 className="font-semibold text-gray-900 dark:text-white">Warning</h3>
            </div>
            <div className="px-3 py-2 flex flex-row justify-between">
                <p>Are you sure to delete?</p>
                <div className="flex flex-row gap-1">
                    <button className="w-6 h-5 bg-green-500 text-white flex justify-center items-center rounded" onClick={() => deleteTodo()}><FaCheck /></button>
                    <button className="w-6 h-5 bg-red-500 text-white flex justify-center items-center rounded" onClick={() => setOpen(false)}><FaXmark /></button>
                </div>
            </div>
        </div>
    );

    return (
        <tr className="bg-white dark:bg-gray-800">
            <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                {todo._id}
            </th>
            <td className="px-6 py-4">
                {todo.title}
            </td>
            <td className="px-6 py-4">
                {todo.description}
            </td>
            <td className="px-6 py-4">
                {todo.isCompleted ? 'Finished' : 'Pending'}
            </td>
            <td className="px-6 py-4 flex gap-1">
                <Popover content={content} trigger="click" open={open} onOpenChange={setOpen}>
                    <button className="py-2 px-4 bg-red-500 text-white grow">Delete</button>
                </Popover>
                {
                    todo.isCompleted || <button className="py-2 px-4 bg-green-500 text-white grow" onClick={() => finishTodo()}>Done</button>
                }
            </td>
        </tr>
    );
}

export default Todo;